<template>
    <el-card>
        <Components title="累计用户数" :value="numberFormat(usersTotal)">
            <v-chart :option="getOption()" />
            <template #footer>
                <div class="compare-wrap">
                    <span>日同比 </span>
                    <span class="emphasis">{{ userGrowthLastDay }}%</span>
                    <span class="increment"></span>
                    <span style="margin-left:10px">月同比 </span>
                    <span class="emphasis">{{ userGrowthLastMonth }}%</span>
                    <span class="decrement"></span>
                </div>
            </template>
        </Components>
    </el-card>
</template>

<script lang="ts">
import Components from './Components.vue'
export default {
    name: 'TotalUsers',
    components: {
        Components
    }
}
</script>
<script lang="ts" setup>
import { computed } from 'vue'
import { useReportDataStore } from '@/stores/reportData'
import useFormat from '@/hooks/userForm'
const reportDataStore = useReportDataStore()
const { numberFormat, moneyFormat } = useFormat()

// 累计
const usersTotal = computed(() => reportDataStore.reportData.usersTotal)
const usersLastMonth = computed(() => reportDataStore.reportData.usersLastMonth)
// 日同比
const userGrowthLastDay = computed(() => reportDataStore.reportData.userGrowthLastDay)
// 月同比
const userGrowthLastMonth = computed(() => reportDataStore.reportData.userGrowthLastMonth)

// 准备数据
const getOption = () => {
    return {
        xAxis: {
            boundaryGap: false,
            show: false,
            min: 0, // x轴最小值
            max: usersLastMonth.value // x轴最大值
        },
        yAxis: {
            type: 'category',
            show: false // 不显示y轴
        },

        series:
        {
            name: '用户增长量',
            data: [(usersTotal.value as number) - (usersLastMonth.value as number)],
            barWidth: 10,
            type: 'bar',
            showBackground: true,
            // 背景样式
            backgroundStyle: {
                color: '#eee'
            },
            label: {
                show: true,
                formatter: '|', // 显示的具体内容
                position: 'right', // 内容的位置
                color: 'yellowgreen' // 颜色
            },
        },
        grid: {
            left: 0,
            top: 0,
            bottom: 0,
            right: 0
        },
        tooltip: {
            trigger: 'axis',
        }

    };
}
</script>
<style lang="scss" scoped>
.compare-wrap {
    display: flex;
    // flex: 1;
    align-items: center;
}
</style>